    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	
	<title>Researching Audiences</title>

	<link rel="stylesheet" href="../assets/jquery-ui-1.8.6.custom.css"/>
        <link rel="stylesheet" href="../assets/imagesequence.css">


	<script src="../assets/javascript/libraries/jquery-1.4.2.min.js"></script>
	<script src="../assets/javascript/libraries/jquery.cycle.all.min.js"></script>
        <script src="../assets/javascript/libraries/jquery.highlight-3.js"></script>
    
    
        <script type="text/javascript" src="../assets/javascript/libraries/jquery.ajaxmanager-3.0.9.js"></script>

	<!-- custom code -->
    
    	<script src="../assets/javascript/vis-model.js"></script>
        <script src="../assets/javascript/errorController.js"></script>
        <script src="../assets/javascript/libraries/jquery-ui-1.8.6.custom.min.js"></script>


        <script src="../assets/javascript/visControllerWordStats.js"></script>
        <script src="../assets/javascript/visControllerImageSequence.js"></script>

        
	 <script type="text/javascript" charset="utf-8">
         
		 /**
		 * The Jquery document ready. Acts like the main. 
		 */
						   
		   $(document).ready(function() {			
			
				myModel = new model();
			        myModel.controllers.push(new visControllerWordStats(myModel)); // Add the word stats to controller to model
                                myModel.controllers.push(new visControllerImageSequence(myModel)); // Add the timeline controller the model
				myModel.startLoading();


                                 /*$("#intro").dialog({
                                    height: $(window).height() *.7,
                                    width: $(window).width() *.8,
                                    title: 'Introduction',
                                    closeOnEscape: true,
                                    modal: true,
                                    draggable: false,
                                    buttons: {
                                        Ok: function() {
                                                $( this ).dialog( "close" );
                                        }
                                }

                                 });*/

                                 
				
		});
		
      </script>
        
        
</head>
<body>
	<div id="container">
    <div id="main">
    
    	
    		<div class="ui-state-error ui-corner-all status-messages" id="search_error_message"> 
                             <p><span class="ui-icon ui-icon-alert status-icon"></span> 
                             <span id="error_text"></span>
                            </p>
		  </div>
          
          <div class="ui-state-highlight ui-corner-all status-messages" id="status_message" >
						<p>
						<span class="ui-icon ui-icon-info status-icon"></span>
						<span id="message_text"></span>
					    </p>
	   	</div>    
        <div id="intro">
           <img src="assets/images/imagesquence-intro.png" alt="Image Sequence" \ >
            <p> This visualisation examines the words used in the feedback and searches Flickr for images that have been
                tagged with that word.   Then a random image is choosen from the 10 most interesting images with the tag.</p>
            <p>As new images are added to Flickr, they will show up in sequence. The visualisation isn’t stable, and the
                images it shows change every day. </p>


        </div>

        
        <div id="CurrentFeedback"></div>
        
            <div class="info">
                 <h2><span class="event"></span></h2>
                 <h4><span class="organisation"></span></h4>
                    <p><span class="venue"></span> ,
                    <span class="date"></span> </p>
                 <h4 class="question"> <span>Question: </span><span class="question"></span></h4 >
           </div>


        
                <div id="feedback">
                         <div class="feedback_messages">
                                  
                         </div>
                 </div>     
                                
        </div>       
   </div>


            
            
</body>
</html>
